import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import grLoading from '../../packages/loading'
Vue.use(grLoading)

const routes = [
	{
		path: '/',
		name: 'home',
		redirect: '/install'
	},
	{
		path: '/buttons',
		name: 'ButtonDoc',
		component: () => import( /* webpackChunkName: "ButtonDoc" */ '../views/ButtonDoc.vue')
	},
	{
		path: '/install',
		name: 'InstallDoc',
		component: () => import( /* webpackChunkName: "InstallDoc" */ '../views/InstallDoc.vue')
	},
	{
		path: '/colorStyle',
		name: 'ColorStyleDoc',
		component: () => import( /* webpackChunkName: "ColorStyleDoc" */ '../views/ColorStyleDoc.vue')
	},
	{
		path: '/icons',
		name: 'IconDoc',
		component: () => import( /* webpackChunkName: "IconDoc" */ '../views/IconDoc.vue')
	},
	{
		path: '/table',
		name: 'TableDoc',
		component: () => import( /* webpackChunkName: "TableDoc" */ '../views/TableDoc.vue')
	},
	{
		path: '/radio',
		name: 'RadioDoc',
		component: () => import( /* webpackChunkName: "RadioDoc" */ '../views/RadioDoc.vue')
	},
	{
		path: '/checkbox',
		name: 'CheckBoxDoc',
		component: () => import( /* webpackChunkName: "CheckBoxDoc" */ '../views/CheckBoxDoc.vue')
	},
	{
		path: '/input',
		name: 'InputDoc',
		component: () => import( /* webpackChunkName: "InputDoc" */ '../views/InputDoc.vue')
	},
	{
		path: '/droplist',
		name: 'DroplistDoc',
		component: () => import( /* webpackChunkName: "DroplistDoc" */ '../views/DroplistDoc.vue')
	},
	{
		path: '/upload',
		name: 'UploadDoc',
		component: () => import( /* webpackChunkName: "UploadDoc" */ '../views/UploadDoc.vue')
	},
	{
		path: '/toast',
		name: 'ToastDoc',
		component: () => import( /* webpackChunkName: "ToastDoc" */ '../views/ToastDoc.vue')
	},
	{
		path: '/image',
		name: 'ImageDoc',
		component: () => import( /* webpackChunkName: "ImageDoc" */ '../views/ImageDoc.vue')
	},
	{
		path: '/popup',
		name: 'PopupDoc',
		component: () => import( /* webpackChunkName: "PopupDoc" */ '../views/PopupDoc.vue')
	},
	{
		path: '/loading',
		name: 'LoadingDoc',
		component: () => import( /* webpackChunkName: "LoadingDoc" */ '../views/LoadingDoc.vue')
	},
	{
		path: '/stepper',
		name: 'StepperDoc',
		component: () => import( /* webpackChunkName: "StepperDoc" */ '../views/StepperDoc.vue')
	},
	{
		path: '/adaptive',
		name: 'AdaptiveDoc',
		component: () => import( /* webpackChunkName: "AdaptiveDoc" */ '../views/AdaptiveDoc.vue')
	},
	{
		path: '/slider',
		name: 'SliderDoc',
		component: () => import( /* webpackChunkName: "SliderDoc" */ '../views/SliderDoc.vue')
	},
	{
		path: '/dialog',
		name: 'DialogDoc',
		component: () => import( /* webpackChunkName: "DialogDoc" */ '../views/DialogDoc.vue')
	},
	{
		path: '/switch',
		name: 'SwitchDoc',
		component: () => import( /* webpackChunkName: "SwitchDoc" */ '../views/SwitchDoc.vue')
	},
	{
		path: '/datePicker',
		name: 'DatepickerDoc',
		component: () => import( /* webpackChunkName: "DatepickerDoc" */ '../views/DatepickerDoc.vue')
	},
	{
		path: '/timePicker',
		name: 'TimepickerDoc',
		component: () => import( /* webpackChunkName: "TimepickerDoc" */ '../views/TimepickerDoc.vue')
	},
	{
		path: '/cascader',
		name: 'CascaderDoc',
		component: () => import( /* webpackChunkName: "CascaderDoc" */ '../views/CascaderDoc.vue')
	},
	{
		path: '/swiper',
		name: 'SwiperDoc',
		component: () => import( /* webpackChunkName: "SwiperDoc" */ '../views/SwiperDoc.vue')
	},
	{
		path: '/rate',
		name: 'RateDoc',
		component: () => import( /* webpackChunkName: "RateDoc" */ '../views/RateDoc.vue')
	},
	{
		path: '/divider',
		name: 'DividerDoc',
		component: () => import( /* webpackChunkName: "DividerDoc" */ '../views/DividerDoc.vue')
	},
	{
		path: '/badge',
		name: 'BadgeDoc',
		component: () => import( /* webpackChunkName: "BadgeDoc" */ '../views/BadgeDoc.vue')
	}
]

const router = new VueRouter({
	base: process.env.NODE_ENV === 'production' ? '/gabriel-ui/': '/',
	mode: 'history',
	routes
})

let loading = null;
//在进入路由之前， 每一次都会执行此方法  全局钩子
router.beforeEach(function(to, from, next) {
	loading = Vue.prototype.$loading();
	next();//继续往下走 
});

router.afterEach(function(to) {
	loading.close();
	loading = null;
})

export default router
